<template>
	<view>
		<view class="pf">
			<image src="https://tilin.gitee.io/super_hero_preview/static/icons/star-yellow.png" v-for="ys in yellowScore"></image>
			<image src="https://tilin.gitee.io/super_hero_preview/static/icons/star-gray.png" v-for="gs in grayScore"></image>
			<view class="movie_score" v-if="showNum">
				{{innerScore}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "score",
		props: {
			innerScore: { //外部传入的分数
				type: Number,
				default: 0
			},
			showNum: { //是否显示具体分数 1-显示 0-不显示
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				yellowScore: 0,
				grayScore: 5,
			};
		},
		created() {
			let tempScore = 0
			if (this.innerScore) {
				tempScore = this.innerScore
			}
			this.yellowScore = parseInt(tempScore / 2)
			this.grayScore = 5 - this.yellowScore
		}
	}
</script>

<style>
	.movie_score {
		margin-left: 10rpx;
		margin-top: -5rpx;
		font-size: 12rpx;
	}

	.pf {
		display: flex;
		margin-top: 10rpx;
	}

	image {
		width: 25rpx;
		height: 25rpx;
	}
</style>
